<html>
	<head>
	<!-- 引入 echarts.js -->
	<script type="text/javascript" src="../static/js/echarts.js"></script>
	<!-- 引入jquery.js -->
	<script type="text/javascript" src="../static/js/jquery-3.3.1.js"></script>

	<script language="javascript" type="text/javascript">
		// 搜索框js
		// 鼠标聚焦时调用
		function searchTextOnfocus(obj) {
			if (obj.value != '')
				obj.value = '';
			obj.style.color = '#333';
		}
		// 鼠标失去焦点的时候调用
		function searchTextOnBlur(obj) {
			if (obj.value == '') {
				obj.value = '请输入想去游玩的城市...';
				obj.style.color = '#98BC00';
			} else {
				obj.style.color = '#333';
			}
		}
		</script>
		<!--搜索框 与 背景的样式-->
		<style>
			body{ background:url(/static/images/body_bg.png) repeat 700px }
			body,p,div,th,td,input,select,textarea,ul,li,a{ color:#333; font-size:12px;font-family:"宋体",Arial,Verdana; padding:0; margin:0;}
			.searchbox{width:483px; height:38px; margin-left:448px; padding-top:10px;position:relative; z-index:99;}
			.searchbox .l{ border:0;padding-left:36px; background:url(/static/images/v5_main_img.png) no-repeat 0 -57px; height:58px;}
			.searchbox .m{ border:0; background:url(/static/images/v5_repeat_x.png) repeat-x 0 -123px; height:58px; }
			.searchbox{width:653px;}
			.searchbox .m .searchbut{background:url(/static/images/v5_main_img.png) no-repeat 0 -115px; cursor:pointer; border:0; width:154px; height:58px; float:right; outline:none;}
			.searchbox .m .searchkey{border:0; margin:0; padding:28px; height:22px; line-height:22px; background:none; font-size:19px; font-weight:bold; color:#98BC00; width:460px; float:left; outline:none;}
		</style>
	</head>
	<body>
	<!-- 搜索框开始 -->
	<div style="margin:0px auto;">
	  <div class="searchbox">
	  <div class="l">
		<div class="m">
			<!--  -->
		  <input id="city" name="city" type="text" class="searchkey" value="请输入想去游玩的城市..."  maxlength="70" style="border:0px;" onfocus="searchTextOnfocus(this);"  onblur="searchTextOnBlur(this);" />
		  <input type="submit" class="searchbut" value="" onclick="loadChart()"/>
		</div>
	  </div>
	  </div>
	</div>
	<!-- 搜索框结束 -->
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height: 90%"></div>
	</body>
	<script type="text/javascript">
		// 初始化 echarts
        var myChart = echarts.init(document.getElementById('main'));
         // 基本的通用设置
         myChart.setOption({
			 // 配置鼠标悬停提示信息
			 tooltip : {
			    // 遇到横坐标的点, 会进行悬停
                trigger: 'axis'
	        },
			 legend: {//图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
				 show:true,
				 data: ['点评数','游记数']//图例的数据数组。
			 },
			 // 配置工具栏
	        toolbox: {
				// 配置工具栏, 显示, 可以柱状图, 折线图, 数据图, 之间进行切换
	            show : true,
				// 工具
	            feature : {
	                // 数据视图
					dataView : {
	                    show: true, // 显示数据视图
						readOnly: true, // 数据只读, 不能编辑
					},
					//动态切换类型, bar: 柱状图, line: 折线图
	                magicType : {show: true, type: ['bar', 'line']}
	            }
	        },
			 // x轴配置
			 xAxis : [
	            {
					name: '景点', //x轴名称
	                type : 'category', //坐标轴类型，横轴默认为类目型'category'
                    axisLabel : {
	                    interval: 0, // 横坐标上文字每间隔几个显示内容, 0表示每一个都显示
                        rotate: 20, // 设置横坐标文字倾斜度
					    formatter: function (name) {
	                        	// 格式化横坐标的文字, 有些景点非常长, 显示不下
								// 这里设置最大长度为18, 还不够就截断后加 ...
								return (name.length > 18 ? (name.slice(0,8)+"...") : name );
						},
                    },
	                data : [] //数据
	            }
	        ],
			 // y坐标轴
             yAxis : [
	            {
	                type : 'value', // 值类型, 默认
	                axisLabel : {
	                    formatter: '{value}',
	                }
	            }
	        ],
             series : [ //系列列表。每个系列通过 type 决定自己的图表类型
	            {
	                name:'点评数',
	                type:'bar',
	                data:[],
	                markLine : { //标记线
	                    data : [
	                        {type : 'average', name: '平均值'}
	                    ]
	                },
					markPoint: { //标记点
						data: [
							{type: 'max', name: '最大值'},
							{type: 'min', name: '最小值'}
						]
					}
	            },{
	                name:'游记数',
	                type:'bar',
	                data:[],
	                markLine : {
	                    data : [
	                        {type : 'average', name: '平均值'}
	                    ]
	                },
					markPoint: { //标记点
						data: [
							{type: 'max', name: '最大值'},
							{type: 'min', name: '最小值'}
						]
					}
	            }]
         });
		 // 加载图形的方法
         function loadChart() {
             // 获取搜索框中城市
             city = $('#city').val()
			 // console.log(city)
			 // 表设置标题
             myChart.setOption({
				 title: {
					 text: city
				 }
			 })

			 myChart.showLoading();
			 //数据加载完之前先显示一段简单的loading动画
			 //发送ajax异步请求, 获取数据
			 $.ajax({
				 type : "get",
				 async : true,    //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
				 url : "/echarts/" + city ,    //请求发送到服务器
				 dataType : "json",        //返回数据形式为json
				 timeout: 60000, // 超时时间, 单位毫秒
				 success : function(results) {
					 //请求成功时执行该函数内容，result即为服务器返回的json对象
					 var names=[];    //名称数组（实际用来盛放X轴坐标值）
			 		 var comments_nums=[];    //点评数量数组（实际用来盛放Y坐标值）
			 		 var travel_notes_nums=[];    //游记数量数组（实际用来盛放Y坐标值）
					 if (results) {
							console.log(results);
							for(var i=0;i<results.length;i++){
		//                     console.log(results["data"]["name"]);
							   names.push(results[i]["name"]);    //挨个取出名称并填入名称数组
							   comments_nums.push(results[i]["comments_num"]);    //挨个取出数量并填入点评数数组
							   travel_notes_nums.push(results[i]["travel_notes_num"]);    //挨个取出数量并填入游记数数组
							 }

							myChart.hideLoading();    //隐藏加载动画
							myChart.setOption({        //加载数据图表
								xAxis: {
								    // 设置X轴上的数据
									data: names
								},
								series: [{
									// 设置评论数, 数据
									data: comments_nums
								},{
									// 设置游记数, 数据
									data: travel_notes_nums
								}],
								 // 配置工具栏
								toolbox: {
									feature : {
										// 配置数据视图
										dataView : {
											optionToContent: function(opt) {
											    return getTable(results)
                                            }
										},
									}
								}
							});
						 }
					},
					 error : function(errorMsg) {
						 //请求失败时执行该函数
						 alert("图表请求数据失败!");
						 myChart.hideLoading();
					 }
				})
         }
		// 根据返回的结果生成数据视图
		function getTable(results){
			// 生成表头
			var table = '<table class="bordered" width="100%"><thead><tr>'
				+ '<th>序号</th>'
				+ '<th>景点</th>'
				+ '<th>点评数</th>'
				+ '<th>游记数</th>'
				+ '<th>所在区域</th>'
				+ '</tr></thead><tbody>';

			// 生成数据
			for (var i = 0; i < results.length; i++) {
				 tr = '<tr><td align="center">' + (i+1) + '</td>'
				  	+ '<td align="center"><a href="'+ results[i]['url'] +'" target="view_window">' + results[i]['name'] + '</a></td>'
				  	+ '<td align="center">' + results[i]['comments_num'] + '</td>'
				  	+ '<td align="center">' + results[i]['travel_notes_num'] + '</td>'
				  	+ '<td align="center">' + results[i]['address'] + '</td></tr>'
				 // 把tr拼接到table上
				 table += tr;
			}
			table += '</tbody></table>'
            return table
        }
    </script>
</html>
